<template>
  <div class="container">
    <h3>vue+openlayers: 加载ArcGIS地图</h3>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import { Tile } from 'ol/layer'
import XYZ from 'ol/source/XYZ'
export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      this.map = new Map({
        target: 'vue-openlayers',
        layers: [
          new Tile({ // 图层
            source: new XYZ({
              url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
            })
          })
        ],
        view: new View({
          projection: 'EPSG:4326', // 投影坐标系
          center: [116.397128, 39.916527], // 中心点
          zoom: 12 // 缩放级别
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
 .container {
    width: 840px;
    height: 550px;
    margin: 50px auto;
    border: 1px solid #ccc;
    #vue-openlayers {
      width: 800px;
      height: 420px;
      margin: 0 auto;
      border: 1px solid #42b983;
      position: relative;
    }
  }
</style>
